<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.事件的绑定</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			总结事件的绑定：
					1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，名同原生DOM事件名；
					2.事件的回调函数需要配置在methods中；
					3.methdos中的函数最终也会出现在vm上（但不存在数据代理了，是直接放在vm上的）；
					4.methods中配置的函数，是Vue所管理的函数，所以务必要写成普通函数，这样this才是vm，才有的玩；

			一个重要的原则：由Vue管理的函数（现阶段我们只学了：data函数、methods中配置的函数，别的没学呢），
			务必写成普通函数，一旦写了箭头函数，this就不再是vm了。

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>学校名称：{{school.name}}</h1>
			<h1>学校地址：{{school.address}}</h1>
			<button v-on:click="showTel">点我查看电话</button>
			<button @click="showTel">点我查看电话</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				data:{
					school:{
						name:'尚硅谷',
						address:'宏福科技园',
						tel:'010-77889966'
					}
				},
				methods:{
					//showTel中的this是谁？ —— vm
					showTel(){
						alert(this.school.tel)
					}
				}
			})

			console.log(vm)
		</script>
	</body>
</html>